<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/copyright.js"></script>

    <link rel="stylesheet" href="common/css/scp.css" type="text/css"/>
    <!-- 私有 -->
    <link rel="stylesheet" href="index/css/index.css" type="text/css"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>

<div class="layui-container" id="app">
    <hr>
    <div>
        <span class="layui-breadcrumb">
            <a href="/mydongtai">个人动态</a>
            <a><cite>首页</cite></a>
        </span>
    </div>
    <hr>
    <div class="layui-row" id="contentArea">
        <div class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
            <div class="layui-row" style="padding: 5px">
                <div style="padding-right: 20px" class="layui-col-md4 layui-col-lg4 layui-col-sm4">
                    <a><img
                            :src="getUrl(item.img)"
                            height="200px" width="100%"></a>
                </div>
                <div class="layui-col-md8 layui-col-lg8 layui-col-sm8">
                    <a>
                        <i style="font-size: 22px;">
                            <b>{{item.title}}</b>
                        </i>
                        <i class="fa fa-close" style="float: right;margin:0 10px;"  @click.stop="deleteNews(item.id)"></i>
                        <i class="fa fa-thumbs-o-up" style="float: right;margin:0 10px;">{{item.primarySum}}</i>
                        <i class="fa fa-commenting-o" style="float: right;margin:0 10px;">{{item.commentSum}}</i>
                    </a>
                    <fieldset class="layui-elem-field layui-field-title site-title">
                        <legend style="font-size: 14px" align="right">{{item.createtime}}</legend>
                    </fieldset>
                    <p style="font-size: 18px; line-height:2">{{item.describle}}</p></div>
            </div>
            <hr>
        </div>
    </div>
</div>
<div id="navbottomBarId"></div>
<script type="text/javascript" charset="utf-8" src="index/js/index.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '1200px'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            , arrow: 'hover'
        });
    });
    new Vue({
        el: '#app',
        data: {
            list: []
        },
        created: function () {
            this.init();
        },
        methods: {
            init: function () {
                let _this = this
                $.get("/news/listByUserName", function (data) {
                    _this.list = data
                })

            },
            getUrl: function (url) {
                return "/" + url
            },
            toDetail: function (id) {
                window.location.href = "myDontaiDetail.html?id=" + id
            },
            deleteNews(id){
                layer.msg(id, {icon: 1})
                $.ajax({
                    url: "/news/deleteNew/"+id,
                    dataType: "json",
                    type: "POST",
                    success: function (result) {
                        layer.msg("删除成功!", {icon: 1})
                        console.log("删除成功")
                        window.location.reload();
                    },
                    error: function (result) {
                        console.log("删除失败！")
                        layer.msg("系统繁忙!")
                    }
                });
            }
        }
    })
</script>
</body>
</html>